<template>
	<view class="list">
		<block v-for="(item,index) in dataList" :key='index'>
			<view class="item" @click="toDetail(item._id)">
				<view class="img-wrapper">
					<image class="image" :src="item.spec_items[0].thumbnail" mode=""></image>
				</view>
				<view class="desc">
					<view class="name">{{item.spec_items[0].pname}}</view>
					<view class="money">
						<text class="unit">￥</text>
						<text class="num">{{item.spec_items[0].price}}</text>
					</view>
					<view class="desc-bottom">
						<view class="star">
							<image class="star-icon" src="/static/images/mall/star@3x.png" mode=""></image>
							<text class="score">{{item.rating}}</text>
						</view>
						<view class="line-DFE1EC">|</view>
						<view class="sold">
							<text class="label">已售</text>
							<text class="count">{{item.spec_items[0].sold_out}}</text>
						</view>
					</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		props: ['dataList'],
		data() {
			return {

			};
		},
		methods: {
			toDetail(id) {
				uni.navigateTo({
					url: `/pageA/product-detail/product-detail?id=${id}`
				})
			},
		}
	}
</script>

<style scoped lang="less">
	@import '@/static/css/util.less';

	.list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.item {
			width: 50%;
			width: 312upx;
			height: 376upx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0upx 4upx 16upx 0upx rgba(0, 42, 64, 0.07);
			border-radius: 8upx;
			margin-bottom: 22upx;

			.img-wrapper {
				width: 100%;
				height: 226upx;
				margin-bottom: 14upx;

				.image {
					width: 100%;
					height: 100%;
				}
			}

			.desc {
				padding-left: 20upx;

				.name {
					color: #474A58;
					font-size: 26upx;
					font-weight: 500;
					line-height: 36upx;
					.ellipsis-x(1)
				}

				.money {
					color: #FF5998;

					.unit {
						font-size: 26upx;
					}

					.num {
						font-size: 30upx;
					}
				}

				.desc-bottom {
					display: flex;
					font-size: 26upx;
					color: #8389A0;

					.star {
						.star-icon {
							width: 20upx;
							height: 20upx;
							margin-right: 10upx;
						}
					}

					.line-DFE1EC {
						width: 26upx;
						height: 20upx;
						text-align: center;
						color: #DFE1EC;
					}
				}
			}
		}
	}
</style>
